<template>
  <view class="px-3.5 pt-6 box-border">
    <view class="px-2 box-border">
      <up-grid :border="false" align="center" gap="18rpx" @click="click">
        <up-grid-item v-for="(item, index) in statisticsList" :key="index">
          <view
            class="flex flex-col item-center text-center w-[100%] h-[100%] part-box pt-1 pb-2 box-border"
            :style="`color:${item.color};background: linear-gradient(180deg, ${item.bgColor0} 0%, ${item.bgColor1} 100%);`"
          >
            <text class="text-[56rpx]">{{ item.num }}</text>
            <text class="text-[29rpx] pt-1">{{ item.title }}</text>
          </view>
        </up-grid-item>
      </up-grid>
    </view>
    <up-divider lineColor="#BBBBBB"></up-divider>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>
<script setup lang="ts">
import { complaintStatOfPolice } from "@/api/complaint/index";

const uToastRef = <any>ref(null);
const statisticsList = ref([
  {
    num: 0,
    title: "本月投诉",
    color: "#038AFE",
    bgColor0: "#FEF9EC",
    bgColor1: "#FFFCF7",
  },
  {
    num: 0,
    title: "本年投诉",
    color: "#61D3C0",
    bgColor0: "#F9FEFD",
    bgColor1: "#F3FFFB",
  },
  {
    num: 0,
    title: "全部",
    color: "#F55300",
    bgColor0: "#F3F9FE",
    bgColor1: "#EEF6FC",
  },
]);
const getStatData = () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });
  complaintStatOfPolice()
    .then((res) => {
      uni.hideLoading();
      const { data } = res;
      statisticsList.value[0].num = data.monthCount;
      statisticsList.value[1].num = data.yearCount;
      statisticsList.value[2].num = data.sumCount;
    })
    .catch((err) => {
      uni.hideLoading();
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 获取统计数据
onLoad(() => {
  getStatData();
});
</script>
<style lang="scss" scoped></style>
